<template>
  <div class="layout-root">
    <aside class="layout-aside">
      <el-menu :default-active="$route.path" router>
        <el-menu-item index="/dashboard">
          <el-icon><i-ep-data-analysis /></el-icon>
          首页
        </el-menu-item>
        <el-menu-item index="/user">
          <el-icon><i-ep-user /></el-icon>
          用户管理
        </el-menu-item>
        <el-menu-item index="/permission">
          <el-icon><i-ep-lock /></el-icon>
          权限管理
        </el-menu-item>
        <el-menu-item index="/settings">
          <el-icon><i-ep-setting /></el-icon>
          系统设置
        </el-menu-item>
      </el-menu>
    </aside>
    <div class="layout-main">
      <header class="layout-header">
        <span class="layout-title">后台管理系统</span>
        <div style="display:flex;align-items:center;gap:12px;">
          <!-- 主题切换/国际化入口 -->
          <ThemeSwitcher />
          <el-dropdown>
            <span class="avatar-btn" style="display:inline-block;cursor:pointer;">
              <el-avatar :size="36" src="src/images/01.jpg" style="background:#409EFF;">
                <!-- <i-ep-user /> -->
              </el-avatar>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="onChangePassword">修改密码</el-dropdown-item>
                <el-dropdown-item divided @click="onLogout">退出账号</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </header>
      <main class="layout-content" ref="mainContent">
        <transition name="fade" @after-enter="scrollToTop">
          <router-view :key="$route.fullPath" />
        </transition>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ThemeSwitcher from '../components/ThemeSwitcher.vue'
import { ElMenu, ElMenuItem, ElButton, ElIcon, ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem, ElMessageBox } from 'element-plus'
import { Menu as IepMenu, DataAnalysis as IepDataAnalysis, User as IepUser, Setting as IepSetting, Lock as IepLock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const showAside = ref(true)
function toggleAside() {
  showAside.value = !showAside.value
}

const mainContent = ref(null)
function scrollToTop() {
  // 路由切换后滚动到顶部，防止滚动条闪烁
  if (mainContent.value) mainContent.value.scrollTop = 0
}

const router = useRouter()
function onLogout() {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 清除登录状态等
    localStorage.removeItem('isLogin')
    router.replace('/login')
  })
}
function onChangePassword() {
  ElMessageBox.alert('请在这里实现修改密码功能', '修改密码', {
    confirmButtonText: '确定'
  })
}
</script>

<style scoped>
.layout-root {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.layout-aside {
  width: 200px;
  height: 100vh;
  background: var(--el-menu-bg-color, #304156);
  flex-shrink: 0;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  box-shadow: 1px 0 6px rgba(0,0,0,0.04);
  transition: width 0.2s;
}
.layout-main {
  margin-left: 200px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: calc(100vw - 200px);
  overflow: hidden; /* 防止主区域出现滚动条 */
}
.layout-header {
  height: 60px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.layout-title {
  font-size: 20px;
  font-weight: bold;
}
.layout-content {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 24px;
  background: #f5f6fa;
  min-height: 0;
  will-change: scroll-position;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.4s cubic-bezier(.4,0,.2,1);
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to, .fade-leave-from {
  opacity: 1;
}

/* 防止 body 出现滚动条 */
:global(body) {
  overflow: hidden;
}
.avatar-btn {
  vertical-align: middle;
}
</style>

